<template>
  <el-main v-loading="loading">
    <el-button type="primary" size="medium" @click="$message.error('暂时不支持此功能')">添加角色</el-button>
    <el-button type="success" size="medium" @click="$message.error('暂时不支持此功能')">批量启用</el-button>
    <el-button type="warning" size="medium" @click="$message.error('暂时不支持此功能')">批量停用</el-button>

    <el-table
      ref="multipleTable"
      :data="roles"
      height="84vh"
      border
      stripe
      tooltip-effect="dark"
      style="width: 100%; margin-top:20px;">
      <el-table-column
        type="selection"
        width="55"
        align="center">
      </el-table-column>
      <el-table-column
        prop="id"
        label="编号"
        width="140"
        align="center">
      </el-table-column>
      <el-table-column
        prop="label"
        label="角色名称"
        width="480"
        align="center">
      </el-table-column>
      <el-table-column
        prop="name"
        label="字段名称"
        width="480"
        align="center">
      </el-table-column>
      <el-table-column
        prop="authorities.length"
        label="权限数量"
        width="140"
        align="center">
      </el-table-column>
      <el-table-column
        label="状态"
        width="140"
        align="center">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.status == 1">已启用</el-tag>
          <el-tag type="warning" v-if="scope.row.status == 2">已停用</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="type"
        label="操作"
        show-overflow-tooltip
        align="center">
        <template slot-scope="scope">
          <el-button type="text" slot="reference" size="small" @click="editRole(scope.row)">分配权限</el-button>
          <el-button type="text" slot="reference" size="small" @click="$message.error('暂时不支持此功能')">禁用角色</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="配置权限"
      :visible.sync="dialogVisible"
      width="622px">
      <el-transfer
        filterable
        v-model="tempAuthorities"
        :props="{key: 'id',label: 'label'}"
        :titles="['未添加', '已添加']"
        :data="authorities">
      </el-transfer>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="chgRole">确 定</el-button>
      </span>
    </el-dialog>
  </el-main>
</template>

<script>
  export default{
    data(){
      return {
        /* 是否加载状态 */
        loading: true,
        /* 是否显示弹出框 */
        dialogVisible: false,
        /* 页面数据 */
        roles: [],
        authorities: [],
        /* 临时角色对象 */
        tempRole: {},
        /* 临时权限id数组 */
        tempAuthorities: []
      }
    },
    methods: {
      editRole: function(role){
        // 将选择的角色对象复制一份成临时对象
        this.tempRole = JSON.parse(JSON.stringify(role))
        // 将临时保存已选择权限的数组设为空
        this.tempAuthorities = []
        // 将已有权限的id循环赋值到临时保存已选择权限的数组
        for(let authority of this.tempRole.authorities){
          this.tempAuthorities.push(authority.id)
        }
        // 显示弹出框
        this.dialogVisible = true
      },
      chgRole: function(){
        // 将临时角色对象中的权限数组清空
        this.tempRole.authorities = []
        // 将临时保存已选择权限的数组中所有权限id转为权限对象赋值给临时角色对象
        for(let aid of this.tempAuthorities){
          this.tempRole.authorities.push({id: aid})
        }
        
        // 将临时角色对象传给后端修改权限
        this.$axios.post("acct/chgRoleAuthorities", this.tempRole).then(res => {
          if(res.data.status == "SUCCESS"){
            //遍历已有的全部角色，如果id和临时储存的角色id一致，将该角色替换为临时角色
            for(let i in this.roles){
              if(this.roles[i].id == this.tempRole.id){
                this.roles.splice(i, 1 , this.tempRole)
                break
              }
            }
            // 关闭弹出窗
            this.dialogVisible = false
          }else{
            this.$message.error("权限同步失败")
          }
        })

      }
    },
    mounted(){
      // 获取所有角色
      this.$axios.get("acct/getRole").then(res => {
        if(res.data.status == "SUCCESS"){
          this.roles = res.data.data
        }else{
          this.$message.error("获取数据失败")
        }
      })

      // 获取所有权限
      this.$axios.get("acct/getAuthority").then(res => {
        if(res.data.status == "SUCCESS"){
          this.authorities = res.data.data
        }else{
          this.$message.error("获取数据失败")
        }
      })

      this.loading = false
    }
  }
</script>

<style scoped>

</style>
